<template>
    <div class="content">
        <ul>
            <li  v-for="item in shops" :key="item.id"  @click="handleListClick">
                <div  class="shoplist-item">
                    <!-- left -->
                    <div class="item-img">
                        <img :src="item.image_path" @load='imgageLoad'/>
                    </div>
                    <!-- right -->
                    <div class="item-detail">
                        <!-- right header -->
                        <section class="detail-header">
                        <h4 class="header-brandnew">{{ item.name }}</h4>
                        <ul class="header-service">
                            <li
                            class="service-item"
                            v-for="service in item.supports"
                            :key="service._id"
                           
                            >
                            {{ service.icon_name }}
                            </li>
                        </ul>
                        </section>
                        <!-- right rating -->
                        <section class="detail-rating">
                        <div class="rating-info">
                            <Star :score="item.rating" :size="24"></Star>
                            <div class="score">{{ item.rating }}</div>
                            <div class="orders">月售{{ item.recent_order_num }}单</div>
                        </div>
                        <div class="rating-logo">{{ item.delivery_mode.text }}</div>
                        </section>
                        <!-- right price -->
                        <section class="detail-price">
                        <p class="price-info">
                            <span class="lowest-price"
                            >￥{{ item.float_minimum_order_amount }} 起送</span
                            >
                            <span class="segment">/</span>
                            <span class="deliver-price"
                            >配送费约￥{{ item.float_delivery_fee }}</span
                            >
                        </p>
                        </section>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import Star from '../../common/Star/Star'
export default {
    components:{
        Star
    },
    props:{
        shops:Array
    },
    methods: {
        imgageLoad(){
            this.$bus.$emit('imageLoad')
        },
        handleListClick(){
            // console.log(12);
            this.$router.push('/shop')
        }
       
    }
};
</script>

<style lang="less" scoped>
.content{
    padding: 4px;
}
.shoplist-item{
    display: flex;
    margin-bottom: 20px;
    .item-img{
        height: 80px;
        img{
            height: 100%;
        }
    }
    .item-detail{
        .detail-header{
            display: flex;
            width: 100%;
            .header-brandnew{
                width: 193px;
                color: #333;
                font-weight: bold;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            .header-service{
                display: flex;
                .service-item{
                    width: 2px;
                    height: 2px;
                    color: #999;
                    padding: 0px 10px;
                   
                }
            }
        }
        .detail-rating{
            margin: 5px 0;
            display: flex;
            .rating-info{
                display: flex;
            }
        }
        
    }
    
    
}

</style>

